<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>评论列表</title>
</head>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.css" rel="stylesheet">
<style>
  body{
    padding: 15px;
  }
</style>
<body>
  

  <!-- 评论面板 -->
  
  <div class="panel panel-primary">
    <div class="panel-heading">
       <h3 class="panel-title">
        发表评论
       </h3>
    </div>
    <form class="panel-body" id="formAddCmt">
      <div>评论人: </div>
      <input type="text" class="form-control" name="username">
      <div>评论内容</div>
      <textarea class="form-control" name="content"></textarea>

      <button type="submit" class="btn btn-primary">发表评论</button>
    </form>
  </div>
  
  <!-- 评论列表 -->
  
  <ul class="list-group">
    <li class="list-group-item">
      <span class="badge" style="background-color: #f0ad4e;">评论时间：</span>
      <span class="badge" style="background-color: #5bc0de;">评论人: </span>
      Item 1
    </li>
  </ul>
  
</body>
<script type="text/javascript" src="./jquery-3.6.0/jQuery3.6.js"></script>
<script type="text/javascript">
  ;(function(){
    var Getlist = function(){
      $.ajax({
        type: "get",
        url: "http://www.liulongbin.top:3006/api/cmtlist",
        success: function(res){
          console.log(res.data)
          if(!res.status == 200){
            alert("获取数据失败!!!")
          }
          var val= res.data,
              rows = [];
          $.each(val, function(index, item){
            var str = `
            <li class="list-group-item">
              <span class="badge" style="background-color: #f0ad4e;">评论时间：${item.time} </span>
              <span class="badge" style="background-color: #5bc0de;">评论人: 
               ${item.username}   
              </span>
              ${item.content}
            </li>`;
            rows.push(str);
          })
          // console.log(rows.join(''));
          $(".list-group-item").empty().append(rows.join(''))
        }
      })
    }
    Getlist();


    $(function(){
      $("#formAddCmt").submit(function(e){
        // 阻止表单默认提交事件
        e.preventDefault()

        // 获取表单提交的数据
        var data = $(this).serialize();
        // $.ajax({
        //   type: "post",
        //   data: {data: data},
        //   url: "http://www.liulongbin.top:3006/api/addcmt",
        //   success: function(res){
        //     if(res.status !== 201){
        //       return alert("发表评论失败!!");
        //     }
        //     Getlist();
        //   }
        // })
       $.post("http://www.liulongbin.top:3006/api/addcmt", data, function(res){
        if(res.status !== 201){
          return alert("发表评论失败!!!");  
        }
        Getlist();

        // 清楚表单的内容 先将jQuery对象转成原生DOM对象加上[0]就行
        $('#formAddCmt')[0].reset();
       })   

      })
    })
    
  })()
</script>
</html>